<!-- 财务审核 -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable" :exportBtn="true"
            @exportHandler="exportHandler">
            <el-form-item label="公司名称">
                <el-input v-model="formInline.company_name" placeholder="输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="总运单ID">
                <el-input v-model="formInline.add_id" placeholder="输入总运单ID"></el-input>
            </el-form-item>
            <el-form-item label="审核">
                <el-select v-model="formInline.xiugai" placeholder="选择审核状态" @change="changeStatusSelect">
                    <el-option label="全部" :value="0"></el-option>
                    <el-option label="未审核" :value="1"></el-option>
                    <el-option label="已审核" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="formInline.status" placeholder="选择状态" @change="changeStatusSelect">
                    <el-option label="全部" :value="0"></el-option>
                    <el-option label="未支付" :value="1"></el-option>
                    <el-option label="已支付" :value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="审核时间">
                <el-date-picker v-model="pickerDateArr" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd"
                    @change="(data) => changeDatePicker(data, 'auditing')"
                    :picker-options="pickerOptions"></el-date-picker>
            </el-form-item>

            <el-form-item label="司机姓名">
                <el-input v-model="formInline.sjxm" placeholder="输入司机姓名"></el-input>
            </el-form-item>

            <el-form-item label="车牌号">
                <el-input v-model="formInline.cph" placeholder="输入车牌号"></el-input>
            </el-form-item>
            <el-form-item label="分运单ID">
                <el-input v-model="formInline.fyd" placeholder="输入分运单ID"></el-input>
            </el-form-item>

            <el-form-item label="发货时间">
                <el-date-picker v-model="pickerDateArrGoods" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                    @change="(data) => changeDatePicker(data, 'goods')"></el-date-picker>
            </el-form-item>
            <el-form-item label="到达时间">
                <el-date-picker v-model="pickerDateArrReach" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                    @change="(data) => changeDatePicker(data, 'reach')"></el-date-picker>
            </el-form-item>
            <!-- <el-form-item label="公司">
                <el-select v-model="formInline.statusId" placeholder="选择公司" @change="changeStatusSelect">
                    <el-option label="全部" :value="0"></el-option>
                    <el-option label="安阳总公司" :value="1"></el-option>
                    <el-option label="林州分公司" :value="2"></el-option>
                    <el-option label="安徽分公司" :value="3"></el-option>
                </el-select>
            </el-form-item> -->
            <CustomDescriptions :data="descriptionsData" :styleBox="{ width: '60%' }"></CustomDescriptions>
        </CustomForm>


        <el-table :data="list.data" style="width: 100%" height="580" v-loading="tableloading" border>
            <el-table-column prop="" label="运单ID" width="110" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.add_id + '-' + scope.row.yund_id }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="company_name" label="公司名称" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="cph" label="车牌号" width="100" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="driver_name" label="司机姓名" width="100" align="center">
            </el-table-column>
            <el-table-column prop="th_time" label="发货时间" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{ scope.row.th_time }}
                </template>
            </el-table-column>
            <el-table-column prop="time" label="到达时间" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{ scope.row.dd_time }}
                </template>
            </el-table-column>
            <el-table-column prop="dd_time" label="审核时间" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{ scope.row.add_time }}
                </template>
            </el-table-column>
            <el-table-column prop="to_address" label="到达地" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="unload" label="收货重量" align="center" width="80">
            </el-table-column>
            <el-table-column prop="yfdj" label="运费单价" align="center" width="80">
            </el-table-column>
            <el-table-column prop="money_bill" label="含税金额" align="center" width="80">
                <template slot-scope="scope">
                    <span>{{ scope.row.money_bill }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="zyf" label="实结金额" align="center" width="100">
            </el-table-column>
            <el-table-column prop="oil_money" label="油气(元)" align="center" width="80">
            </el-table-column>
            <el-table-column prop="oil_money" label="审核状态" align="center" width="80">
                <template slot-scope="scope">
                    <span v-if="scope.row.xiugai == 0" style="color:red">未审核</span>
                    <span v-else-if="scope.row.xiugai == 1" style="color:green">已审核</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="支付状态" align="center" width="80">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 0" style="color:red">未支付</span>
                    <span v-else-if="scope.row.status == 1" style="color:green">已支付</span>
                    <span v-else-if="scope.row.status == 2" style="color:blue">二次支付</span>

                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" style="padding-left: 6px;padding-right: 6px;"
                        @click="showPaymentBillDetail(scope.row)">{{ scope.row.xiugai == 1 && scope.row.status == 1
                            ? '查 看' : '审核与支付' }}</el-button>

                    <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" class="in-page-dropdown">
                            <el-dropdown-item>
                                <el-button size="mini" type="primary" style="padding-left: 6px;padding-right: 6px;"
                                    @click="syncPayInfo(scope.row.yund_id)">同步支付信息</el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button size="mini" type="primary" style="padding-left: 6px;padding-right: 6px;"
                                    @click="upWaybill(scope.row)">上传运单</el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>


                </template>
            </el-table-column>

        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog top="5vh" class="dialog" title="查看财务审核信息" :close-on-click-modal="false"
            :visible.sync="dialogVisibleAuditing" width="80%">
            <processAndpay v-if="dialogVisibleAuditing" :billDetail="billDetail" @closeDialog="closeDialog" />
        </el-dialog>
    </div>
</template>

<script>
import { check, paymentBillDetail, uploadPay, uploadBill, exportData } from '@/api/moneyManagment';
import processAndpay from "./components/processAndpay";
import { getToken, getUserId } from '@/utils/tool';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        processAndpay
    },
    data() {
        //这里存放数据
        return {
            formInline: {
                company_name: "",
                add_id: "",
                status: 0,//0全部1未支付2已支付
                xiugai: 0,//0全部1未修改2修改
                time: "",
                sjxm: "",
                cph: "",
                fyd: "",
                ftime: "",
                statusId: 0,
                page: 1,
                pageSize: 10,
            },
            total: 0,
            list: {},
            pickerDateArr: "",//日期选择
            pickerDateArrGoods: "",//发货时间日期选择
            pickerDateArrReach: "",//到达时间日期选择
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },

            descriptionsData: [
                {
                    label: "总订单数",
                    count: 0,
                    unit: "(单)"
                },
                {
                    label: "总金额",
                    count: 0,
                    unit: "(元)"
                },
                {
                    label: "总重量",
                    count: 0,
                    unit: "(吨)"
                }
            ],
            dialogVisibleAuditing: false,

            tableloading: false,

            billDetail: {},

            billId: '',
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async check() {
            this.tableloading = true;
            let res = await check(this.formInline);
            if (res.code == 200) {
                this.total = res.data.count;
                this.descriptionsData[0].count = res.data.count;
                this.descriptionsData[1].count = res.data.money;
                this.descriptionsData[2].count = res.data.weight;
                this.list = res.data.list;
            }

            this.tableloading = false;
        },
        onSubmit() {
            this.formInline.page = 1;
            this.check();
        },
        resetTable() {
            this.formInline = {
                company_name: "",
                add_id: "",
                status: 0,//0全部1未支付2已支付
                xiugai: 0,//0全部1未修改2修改
                time: "",
                sjxm: "",
                cph: "",
                fyd: "",
                ftime: "",
                statusId: "",
                page: 1,
                pageSize: 10,
            };
            this.pickerDateArr = "";//日期选择
            this.pickerDateArrGoods = "";//发货时间日期选择
            this.pickerDateArrReach = "";//到达时间日期选择

            this.check();
        },
        changeStatusSelect() {//状态发生改变回调函数
            this.formInline.page = 1;
            this.check();
        },
        changeDatePicker(data, type) {//
            if (data && type == 'auditing') {
                this.formInline.time = data.join(' - ');
            } else if (data && type == 'goods') {
                this.formInline.ftime = data.join(' - ');
            } else if (data && type == 'reach') {
                this.formInline.dtime = data.join(' - ');
            } else {
                this.formInline.time = "";
                this.formInline.ftime = "";
                this.formInline.dtime = "";
            }
        },
        handleCurrentChange(page) {
            this.formInline.page = page;
            this.check()
        },

        handleSizeChange(pagesize) {
            this.formInline.pageSize = pagesize;
            this.check()
        },
        async showPaymentBillDetail(item) {
            this.billId = item.id;
            let result = await paymentBillDetail({
                id: item.id
            });
            if (result.code == 200) {
                this.billDetail = result.data;
                this.dialogVisibleAuditing = true;
            }
        },
        closeDialog() {
            this.dialogVisibleAuditing = false;
            this.check();
        },
        syncPayInfo(yund_id) {
            this.$confirm('确定要同步平台支付信息吗？', '同步平台支付信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await uploadPay({
                    yund_id
                });
                if (res.code == 200) {
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => { });
        },
        upWaybill(row) {
            this.$confirm('确定要重新上传运单吗？', '运单上传', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await uploadBill({
                    yund_id: row.yund_id,
                    id: row.id
                });
                if (res.code == 200) {
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => { });
        },
        exportHandler() {//导出数据
            if (!this.formInline.time) {
                this.$message.error('请先选择审核时间的时间段!');
                return;
            }
            window.open(`https://api.zhgylgl.com/api/ah/exportData?time=${this.formInline.time}&company_name=${this.formInline.company_name}&token=${getToken()}&userId=${getUserId()}`, '_blank', '');
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        if (this.$route.query) {
            if (this.$route.query.xiugai) {
                this.formInline.xiugai = Number(this.$route.query.xiugai);
            }
            if (this.$route.query.status) {
                this.formInline.status = Number(this.$route.query.status);
            }
        }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.check();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
::v-deep .el-pagination {
    margin-top: 10px;

}

:v-deep .el-table .cell {
    padding-left: 0;
    padding-right: 0;
}
</style>